<template>
  <div class="w750 white-bg" :class="themes.theme">
    <!-- 审核成功 -->
    <div class="apply-extension">
      <!--<p class="extension-suc"><i class="img"><img src="../../../assets/images/submit-success.png" alt=""></i><em class="txt">申请成功</em></p>-->
      <div class="extension-step">
        <div class="step-det">
          <em class="step-icon"></em>
          <span class="step-txt">分享二维码或链接，邀请好友注册</span>
        </div>
        <div class="step-det">
          <em class="step-icon"></em>
          <span class="step-txt">好友后续产生消费，您就可获取佣金</span>
        </div>
        <div class="step-det">
          <em class="step-icon"></em>
          <span class="step-txt">好友再邀请其他好友，您也坐享佣金</span>
        </div>
        <div class="step-det">
          <span class="step-tit">推广链接</span>
          <span class="net">{{value + '/extensionJump?parentUserName=' + data.userName}}</span>
          <a href="javascript:;" class="copy" v-clipboard:copy="value + '/extensionJump?parentUserName=' + data.userName" v-clipboard:success="onCopy" v-clipboard:error="onError">复制链接</a>
        </div>
        <div class="step-det">
          <span class="step-tit">推广二维码</span>
          <qrcode-vue :value="value + '/extensionJump?parentUserName=' + data.userName" id="picture" :size="size" level="H"></qrcode-vue>
          <!--<span class="code"><img src="../../../assets/images/legend-code.jpg" alt=""></span>-->
          <a href="javascript:;" class="copy" @click="savePic">查看大图</a>
        </div>
      </div>
      <div class="b-btn" @click="goMyExtension">
        <a href="javascript:;" class="btn-r">我的推广</a>
      </div>
    </div>
    <!-- /审核成功 -->
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import { Swipe , SwipeItem  , NavBar , List , ImagePreview } from "vant";
  import config from 'config/config';
  import QrcodeVue from 'qrcode.vue'
  import { applyPromoter , submitPromoter } from "api/extensionApi";
  export default {
    components: {
      NavBar,
      QrcodeVue
    },
    data() {
      return {
         
        value: '',
        size: 80,
        config: config.server,
        data: ''
      };
    },

    watch: {

    },
    mounted() {
      let that = this

      applyPromoter().then(res => {
        if(res.status == 1) {
          this.value = res.result.vueDomain
          this.data = res.result
        }
      })
    },
    methods: {
      // 返回
      goback() {
        this.$router.back();
        this.$router.isBack = true
      },

      savePic(){
//找到canvas标签
        let myCanvas = document.getElementById('picture').getElementsByTagName('canvas');
//创建一个a标签节点
        let a = document.createElement("a")
//设置a标签的href属性（将canvas变成png图片）
        a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
        let arrPic = []
        arrPic.push(a.href)
        ImagePreview({
          images: arrPic,
          onClose() {
            // do something
          }
        });
// //设置下载文件的名字
//         a.download = "推广图片"
// //点击
//         a.click()
// //弹出提示
//         this.$toast('正在下载图片')

      },
      //复制
      onCopy() {
        this.$toast.success({
          message: '内容已复制',
          duration: 1000
        });
      },
      onError() {
        this.$toast.fail({
          message: '内复制失败',
          duration: 1000
        });
      },
      //去我的分享
      goMyExtension() {
        this.$router.push('/myExtension')
      }
    },
    computed: {
      ...mapState(['themes']),
    }
  };
</script>


<style src="../../../assets/css/extension.css" scoped></style>
<style scoped>
  .step-tit {
    vertical-align: top;
  }
  #picture {
    display: inline-block;
  }
</style>

